<template>
  <BasicTable
    @register="registerTable"
  >
    <template #form-custom> </template>
<!--    <template v-if="checkedKeys.length > 0" #headerTop>
      <a-alert type="info" show-icon>
        <template #message>
          <template >
            <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
            <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
          </template>

        </template>
      </a-alert>
    </template>-->
    <template #toolbar>
      <a-button type="primary" @click="handleCreate"> 新增 </a-button>
      <a-button type="primary" class="my-4" @click="handleDownloadByUrl">下载模板</a-button>
      <BasicUpload ref="Upload" :maxSize="20" :maxNumber="1"  @change="handleChange" :api="uploadApi" />
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
            {
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
      />
    </template>
  </BasicTable>
  <!--注册drawer  -->
  <WebsiteExamResultDrawer @register="registerDrawer" @success="handleSuccess" />
</template>
<script lang="ts">
  import { defineComponent, ref ,onMounted ,watch} from 'vue';
  import {BasicTable, useTable,TableAction} from '/@/components/Table';
  import { getBasicColumns, getFormConfig } from './websiteExamResultTableData';
  import { Alert } from 'ant-design-vue';

  //编辑表单
  import WebsiteExamResultDrawer from './websiteExamResultDrawer.vue';
  //左侧拉板
  import { useDrawer } from '/@/components/Drawer';
  import { websiteExamResultListApi ,getWebsiteExamResultVoByIdApi,logicalRemoveById } from '/@/api/website/websiteExamResultApi';
  import { message } from 'ant-design-vue';

  import { BasicUpload } from '/@/components/Upload';
  import { uploadApi } from '/@/api/sys/uploadExcel';
  import { downloadByUrl } from '/@/utils/file/download';

  export default defineComponent({
    components: { BasicTable, AAlert: Alert,WebsiteExamResultDrawer,TableAction,BasicUpload  },
    setup() {
      const [registerDrawer, { openDrawer }] = useDrawer();
      const checkedKeys = ref<Array<string | number>>([]);
      const Upload = ref(null)
      const [registerTable, { reload,getForm ,setTableData ,setPagination,setLoading }] = useTable({
        title: '专业管理',
        columns: getBasicColumns(),
        useSearchForm: true,
        formConfig: getFormConfig(),
        showTableSetting: true,
        rowKey: 'examResultId',
        bordered: true,
        showIndexColumn: true,
        actionColumn: {
          width: 80,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        api: websiteExamResultListApi,
        fetchSetting: {
          pageField: 'current',
          // 每页显示多少条
          sizeField: 'pageSize',
          // 请求结果列表字段  支持 a.b.c
          listField: 'records',
          totalField: 'total',

        },
      });
      function handleCreate() {
        openDrawer(true, {
          isUpdate: false,
        });
      }

      async function handleEdit(record: Recordable) {
        const data = await getWebsiteExamResultVoByIdApi(record.examResultId);
        openDrawer(true, {
          data,
          isUpdate: true,
        });
      }

      async function handleDelete(record: Recordable) {
        await logicalRemoveById(record.examResultId);
        reload();
        message.success('删除成功');
      }

      function handleSuccess() {
        reload();
      }
      function handleDownloadByUrl() {
        downloadByUrl({
          url: 'https://juxian-1300260405.cos.ap-beijing.myqcloud.com/%E6%88%90%E7%BB%A9%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xls',
          target: '_self',
        });
      }

      onMounted(() => {
        console.log(Upload)

      });


      return {
        handleDownloadByUrl,
        registerTable,
        checkedKeys,
        handleCreate,
        handleEdit,
        handleDelete,
        handleSuccess,
        registerDrawer,
        uploadApi,
        handleChange: (list: string[]) => {
          console.log(uploadApi)
          createMessage.info(`已上传文件${JSON.stringify(list)}`);
        },
      };
    },
  });
</script>
